<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节流</title>
</head>
<body>
<p>效果：实验可发现在持续输入时,注意是持续动作，会按照代码中的设定，每1秒执行一次ajax请求</p>
<input type="text" name="throttle" id="throttle">
</body>
<script>
    /**
     * 2.1 什么是节流
     规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，
     如果在同一个单位时间内某事件被触发多次，只有一次能生效。

     函数节流是间隔时间执行，不管事件触发有多频繁，
     都会保证在规定时间内一定会执行一次真正的事件处理函数。

     2.2 应用场景
     (1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

     (2)在页面的无限加载场景下，需要用户在滚动页面时，
     每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；

     (3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
     */
</script>
<script src="throttle.js"></script>
<script>

    function ajax(content){
        console.log('ajax request' + content)
    }


    let throttleAjax = throttle(ajax, 1000)
    let inputThrottle = document.getElementById('throttle')
    inputThrottle.addEventListener('keyup', function (e) {
        throttleAjax(e.target.value)
    })

</script>
</html>